<template>
	<div class="cms-index-container">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="4" class="mb10">
				<el-card shadow="hover">
					<el-tree node-key="id"
						:data="accordion.channel.datas" 
						:props="accordion.channel.props"
						:default-expanded-keys="accordion.channel.defaultExpandedKeys"
						:highlight-current="true"
						:expand-on-click-node="false" 
						@node-click="channelNodeClick">
					</el-tree>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="20">
				<el-card shadow="hover" class="mb10">
					<el-button-group>
						<el-button @click="onOpenDashboard()" type="primary" plain icon="el-icon-odometer">仪表盘</el-button>
						<el-button v-auth="'cms:site:edit'" @click="onOpenEditSite()" type="primary" plain icon="el-icon-edit">修改站点</el-button>
						<el-button v-auth="'cms:site:config'" @click="onVerifyCheck()" type="primary" plain icon="el-icon-setting">配置站点</el-button>
						<el-button v-auth="'cms:site:remove'" @click="onOpenDelSite()" type="primary" plain icon="el-icon-delete">删除站点</el-button>
						<el-button v-auth="'cms:channel:list'" @click="onOpenListChannel()" type="primary" plain icon="el-icon-operation">栏目管理</el-button>
						<el-button v-auth="'cms:document:list'" @click="onOpenListDocument()" type="primary" plain icon="el-icon-document">稿件管理</el-button>
						<el-button v-auth="'cms:template:list'" @click="onOpenListTemplate()" type="primary" plain icon="el-icon-share">模板管理</el-button>
						<el-button v-auth="'cms:material:list'" @click="onOpenListMaterial()" type="primary" plain icon="el-icon-picture">素材管理</el-button>
					</el-button-group>
				</el-card>
				<!-- 站点管理 -->
				<el-card v-if="accordion.card == 'dashboard'" shadow="hover" class="mb10">
					<el-row>
						<el-col>
							<center>
								<el-empty description="The dashboard is being built, so stay tuned. ~~"></el-empty>
							</center>
						</el-col>
					</el-row>
				</el-card>
				
				<!-- 栏目管理 -->
				<Channel v-if="accordion.card == 'channel'" ref="channelRef" :model="accordion.site" @submit="onChannelsReload"></Channel>
				
				<!-- 稿件管理 -->
				<Document v-if="accordion.card == 'document'" ref="documentRef" :model="accordion.channel.active"></Document>
				
				<!-- 模板管理 -->
				<ChannelTemplate v-if="accordion.card == 'template'" ref="templateRef" :model="accordion.channel.active"></ChannelTemplate>
				
				<!-- 素材管理 -->
				<Material v-if="accordion.card == 'material'" ref="materialRef" :model="accordion.site"></Material>
				
			</el-col>
		</el-row>
		
		<EditSite ref="editSiteRef" @submit="onSiteReload"/>
		
		<!-- 站点配置-->
		<ConfigSite ref="configSiteRef"/>
		<el-dialog title="密码验证" v-model="isShowDialog" width="30%">
			<el-form ref="pwdverifyFormRef" :model="verifyFormData" :rules="verifyFormRules" label-width="80px">
				<el-row :gutter="35">
					<el-col>
						<el-form-item label="登录密码" prop="password">
							<el-input type="password" v-model="verifyFormData.password" placeholder="请输入当前登录用户密码" class="w100" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<p class="color-warning ml10">修改站点配置属于危险操作，请确认是否必要修改，如是请继续操作。</p>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onVerifyCancel">取 消</el-button>
					<el-button type="primary" @click="onVerifySubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { lineToTreeData } from '/@/utils/commonFunction';
import { verifyPassword } from '/@/utils/toolsValidate';
import { useRoute } from 'vue-router';
import { Local } from '/@/utils/storage';
import { SM } from '/@/utils/sm';

import EditSite from '/@/views/cms/channel/editSite.vue';
import ConfigSite from '/@/views/cms/channel/configSite.vue';
import Channel from '/@/views/cms/channel/index.vue';
import Document from '/@/views/cms/document/index.vue';
import ChannelTemplate from '/@/views/cms/channel/template/index.vue';
import Material from '/@/views/cms/material/index.vue';

import { pwdVerify } from '/@/api/login/index';
import { getChannel, getChannelList, delSite } from '/@/api/cms/channel/index';
export default {
	name: 'cms/site',
	components: { EditSite, ConfigSite, Channel, Document, ChannelTemplate, Material },
	setup() {
		const addSiteRef = ref();
		const editSiteRef = ref();
		const configSiteRef = ref();
		const pwdverifyFormRef = ref();
		const channelRef = ref();
		const documentRef = ref();
		const templateRef = ref();
		const materialRef = ref();
		const route = useRoute();
		
		const validPassword = (rule, value, callback) => {
			if(!value){
				return callback(new Error('登录密码不能为空'));
			}
			if(!verifyPassword(value)){
				return callback(new Error('只允许字母数字和 !@#$%^&.*_ 组成6~16个字符'));
			}
			callback();
		}
		
		const state = reactive({
			accordion: {
				card: 'dashboard',
				site: {},
				channel: {
					active: {},
					datas: [] as any,
					defaultExpandedKeys: [] as any,
					props: {
						label: 'name',
						children: 'children'
					}
				}
			},
			isShowDialog: false,
			verifyToken: '',
			verifyFormData: {},
			verifyFormRules : {
				password: { required: true, validator: validPassword, trigger: 'blur' },
			}
		});
		
		const loadSite = async () => {
			await getChannel({id : route.query.id}).then(res => {
				if(res.code === 0){
					state.accordion.site = res.data;
				}
			});
			await loadChannels();
		}
		
		const loadChannels = async () => {
			await getChannelList({siteId : route.query.id}).then(res => {
				if(res.code === 0){
					state.accordion.channel.datas = lineToTreeData(res.data);
					//默认第一级展开
					state.accordion.channel.defaultExpandedKeys.push(state.accordion.channel.datas[0]?.id);
				}
			})
		}
		const onOpenEditSite = () => {
			editSiteRef.value.openDialog(state.accordion.site);
		}
		const onOpenDelSite = () => {
			ElMessageBox.confirm('确定删除该【' + state.accordion.site.name + '】站点空间信息吗？', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delSite([state.accordion.site.id]).then((res) => {
					if(res.code === 0){
						ElMessage.success('删除成功');
						onSiteReload();
					}
				});
			}).catch(() => {});
		}
		//仪表盘
		const onOpenDashboard = () => {
			state.accordion.card = 'dashboard';
		}
		//栏目管理
		const onOpenListChannel = () => {
			state.accordion.card = 'channel';
		}
		//稿件管理
		const onOpenListDocument = () => {
			state.accordion.card = 'document';
			if(!state.accordion.channel.active.id){
				state.accordion.channel.active = state.accordion.channel.datas[0];
			}
		}
		//模板管理
		const onOpenListTemplate = () => {
			state.accordion.card = 'template';
			if(!state.accordion.channel.active.id){
				state.accordion.channel.active = state.accordion.channel.datas[0];
			}
		}
		// 素材管理
		const onOpenListMaterial = () => {
			state.accordion.card = 'material';
		}
		// 站点栏目点击
		const channelNodeClick = (node: any) => {
			state.accordion.channel.active = node;
			if(state.accordion.card === 'dashboard' && node.parentId !== '0'){
				onOpenListDocument();
			}
		}
		// 数据重载
		const onSiteReload = () => {
			loadSite();
		}
		const onChannelsReload = () => {
			loadChannels();
		}
		
		const onVerifyCheck = () => {
			state.isShowDialog = true;
		}
		const onVerifyCancel = () => {
			state.isShowDialog = false;
		}
		const onVerifySubmit = () => {
			pwdverifyFormRef.value.validate(valid => {
				if(valid){
					const publickey = Local.get('publicKey');
					let password = SM.sm2Encrypt(state.verifyFormData.password, publickey);
					pwdVerify({password : password}).then((res) => {
						if(res.code === 0 && res.data){
							ElMessage.success('密码验证通过');
							state.verifyFormData.password = undefined;
							state.isShowDialog = false;
							configSiteRef.value.openDialog({
								siteId: state.accordion.site?.id,
								verifyToken: res.data
							})
						}else{
							ElMessage.error('密码验证不通过');
						}
					});
				}
			});
		};
		// 页面加载时
		onMounted(() => {
			loadSite();
		});
		
		return {
			addSiteRef,
			editSiteRef,
			configSiteRef,
			pwdverifyFormRef,
			channelRef,
			documentRef,
			templateRef,
			materialRef,
			onOpenDashboard,
			onOpenEditSite,
			onOpenDelSite,
			onOpenListChannel,
			onOpenListDocument,
			onOpenListTemplate,
			onOpenListMaterial,
			onSiteReload,
			onChannelsReload,
			channelNodeClick,
			onVerifyCheck,
			onVerifyCancel,
			onVerifySubmit,
			...toRefs(state),
		};
	},
};
</script>